<template>
	<div>
	  <!-- 搜索栏 ： 两个搜索框  搜索按钮  添加商家按钮  批量删除   -->
	  <el-row>
		<el-col :span="2"></el-col>
		<el-col :span="5">
			 <el-input placeholder="请输入名称搜索" v-model="query.businessName"/>
		</el-col>
		<el-col :span="5">
				<el-input placeholder="请输入地址搜索" v-model="query.businessAddress"/>
		</el-col>
		<el-col :span="2">
				<el-button type="primary" plain @click="getByPage">搜索</el-button>
		</el-col>
		<el-col :span="3">
				<el-button type="success" plain @click="showDialog">新增商家</el-button>
		</el-col>
		<el-col :span="3">
				<el-button type="danger" plain @click="handleBatchDel">批量删除</el-button>
		</el-col>
		
	  </el-row>
	  <!-- 表格 -->
	  <el-row>
		<el-col :span="2"></el-col>
		<el-col :span="20">
			
		  <el-table :data="pb.data" 
					stripe 
					border
					@selection-change="handleSelectionChange">
			<el-table-column type="selection"  width="55" />
			<el-table-column type="index" width="50" />
			<el-table-column prop="businessAccount" label="商家账号" width="100px" show-overflow-tooltip/>
			<el-table-column prop="businessName" label="商家名称" width="120px"/>
			<el-table-column prop="businessAddress" label="商家地址" width="120px" show-overflow-tooltip/>
			<el-table-column prop="businessExplain" label="商家简介" width="120px" show-overflow-tooltip/>
			<el-table-column label="主图">
				<template #default="scope">
					<el-image style="width: 50px" :src="scope.row.businessImg" fit="contain" />
				</template>
			</el-table-column>
			<el-table-column label="起送价">
				<template #default="scope">
					￥{{scope.row.startPrice}}
				</template>
			</el-table-column>
			<el-table-column label="配送费">
				<template #default="scope">
					￥{{scope.row.deliveryPrice}}
				</template>
			</el-table-column>
			<el-table-column label="操作" width="200px">
				  <template #default="scope">
					<el-button size="small" @click="handleEdit(scope.row.businessId)">
					  编辑
					</el-button>
					<el-button
					  size="small"
					  type="danger"
					  @click="handleDelete(scope.row.businessId)"
					>
					  删除
					</el-button>
				  </template>
				</el-table-column>
		  </el-table>
			
		</el-col>
		
	  </el-row>  
	  <!-- 分页组件 -->
	  <el-row>
		<el-col :span="6"></el-col>
		<el-col :span="12">
			 <el-pagination
				  v-model:current-page="query.pageNow"
				  v-model:page-size="query.pageCount"
				  :page-sizes="[5, 8, 10, 20]"
				  layout="total, sizes, prev, pager, next, jumper"
				  :total="pb.totalRows"
				  @size-change="getByPage"
				  @current-change="getByPage"
				/>
		</el-col>
		
	  </el-row>  
	  
	  <!-- 编辑商家信息的对话框  用于添加和修改 -->
	  <el-dialog v-model="dialogFormVisible" title="编辑商家信息" width="500" draggable>
		  <el-form :model="form">
			<el-form-item label="商家账号" :label-width="formLabelWidth">
			  <el-input v-model.trim="form.businessAccount" autocomplete="off" readonly/>
			</el-form-item>
			<el-form-item label="商家名称" :label-width="formLabelWidth">
				<el-input v-model.trim="form.businessName" autocomplete="off" />
			</el-form-item>
			<el-form-item label="商家地址" :label-width="formLabelWidth">
				  <el-input v-model.trim="form.businessAddress" autocomplete="off" />
			</el-form-item>
			<el-form-item label="商家简介" :label-width="formLabelWidth">
				  <el-input v-model.trim="form.businessExplain" autocomplete="off" />
			</el-form-item>
			<el-form-item label="主图上传" :label-width="formLabelWidth">
				<el-upload
					class="avatar-uploader"
					action="http://localhost:8080/upload"
					:show-file-list="true"
					:on-success="handleAvatarSuccess"
					:before-upload="beforeAvatarUpload"
					with-credentials="true"
					name="myFile"
				  >
				<img v-if="imageUrl" :src="imageUrl" class="avatar" />
				<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
			  </el-upload>
			</el-form-item>
			<el-form-item label="起送价" :label-width="formLabelWidth">
				  <el-input-number v-model="form.startPrice" :min="5"/>
			</el-form-item>
			<el-form-item label="配送费" :label-width="formLabelWidth">
				  <el-input-number v-model="form.deliveryPrice" :min="5"/>
			</el-form-item>
			<el-form-item label="备注" :label-width="formLabelWidth">
				  <el-input v-model.trim="form.remarks" autocomplete="off" />
			</el-form-item>
		  </el-form>
		  <template #footer>
			<div class="dialog-footer">
			  <el-button @click="dialogFormVisible = false">取消</el-button>
			  <el-button type="primary" @click="addOrUpdate">
				确认提交
			  </el-button>
			</div>
		  </template>
	</el-dialog>
	  
	</div>
  </template>
  
  <script setup>
  import { onMounted, ref, getCurrentInstance } from 'vue';
  import { ElMessage,ElMessageBox } from 'element-plus';
  import { nanoid } from 'nanoid';
  import { Plus } from '@element-plus/icons-vue'
  
	let {proxy} = getCurrentInstance();
  
	//对话框是否显示
	let dialogFormVisible = ref(false);
	let formLabelWidth = ref('100px');
	
	//表单数据 添加和修改
	let form = ref({
		businessAccount: '',
		businessName: '',
		businessAddress: '',
		businessImg: '',
		businessExplain: '',
		startPrice: 0.0,
		deliveryPrice: 0.0,
		remarks: ''
	})
	
	//生成商家账号的函数
	const generateAccount = ()=>{
		let account = nanoid().replaceAll("_","").replaceAll("-","");
		console.log(account);
		let startIndex = Math.floor(Math.random()*10);
		account = account.substring(startIndex,startIndex+9);
		console.log(account);
		return account;
	}
	
	//点新增商家信息按钮弹出对话框
	const showDialog = ()=>{
		
		dialogFormVisible.value = true;
		//数据清除
		form.value = {
			businessAccount: generateAccount(),
			businessName: '',
			businessAddress: '',
			businessExplain: '',
			businessImg: '',
			startPrice: 0.0,
			deliveryPrice: 0.0,
			remarks: ''
		};
		//清空之前上传的图片的回显链接
		imageUrl.value = '';
	}
  
	//分页+搜索条件
	let query = ref({
		pageNow: 1,
		pageCount: 5,
		businessName: '',
		businessAddress: ''
	})
	
	//分页对象 totalRows  totalPages  data(集合)
	let pb = ref({
		totalRows: 0,
		totalPages: 0,
		data: []
	})
  
	const getByPage = ()=>{
		proxy.$axios({
			method: 'post',
			url: '/business/page',
			data: query.value
		}).then(res=>{
			console.log(res);
			let resultBean = res.data;
			if(resultBean.code==200){
			  let pageBean = resultBean.data; 
			  pb.value = pageBean;// totalRows  totalPages  data(集合)
			}else{
				ElMessage.error(resultBean.msg);
			}
		})
	}
	
	//添加或修改
	const addOrUpdate = ()=>{
		proxy.$axios({
			method: 'post',
			url: '/business',
			data: form.value
		}).then(res=>{
			let resultBean = res.data;
			if(resultBean.code == 200){
				getByPage();
				dialogFormVisible.value = false;
				ElMessage.success('保存商家信息成功');
			}else{
				ElMessage.error(resultBean.msg);
			}
		})
	}
	
	//处理数据回显
	const handleEdit = (businessId)=>{
		console.log('回显：businessId----',businessId);
		//根据id查询对应的实体数据
		proxy.$axios({
			method: 'get',
			url: '/business/'+businessId
		}).then(res=>{
			let resultBean = res.data;
			if(resultBean.code == 200){
				form.value = resultBean.data;
				imageUrl.value = resultBean.data.businessImg; //回显之前的图片
				dialogFormVisible.value = true;
			}else{
				ElMessage.error(resultBean.msg);
			}
		})
	}
	
	//处理删除
	const handleDelete = (businessId)=>{
		console.log('删除：businessId----',businessId);
		ElMessageBox.confirm(
			'您确定要删除该商家信息吗？',
			'删除提示',
			{
			  confirmButtonText: '确定',
			  cancelButtonText: '取消',
			  type: 'warning',
			}
		  )
			.then(() => {
				
				//确定删除
				proxy.$axios({
					method: 'delete',
					url: '/business/'+businessId
				}).then(res=>{
					let resultBean = res.data;
					if(resultBean.code == 200){
						ElMessage.success('删除成功');
						getByPage();
					}else{
						ElMessage.error(resultBean.msg);
					}
				})
				
			})
			.catch(() => {
				 ElMessage.info('取消删除');
			})
	}
	
	// const selectable = (row,index)=>{
	   //  console.log('selectable',row,index);
	   //  return true;
	// }
	
	//选中项的id集合
	let selectOptions = ref([]);
	
	//表格中多选框选中或取消时会触发  也就是选中项变化
	const handleSelectionChange = (newSelection)=>{
		console.log('选中项改变',newSelection);
		selectOptions.value = []; //清空
		newSelection.forEach((selOp)=>{
			console.log(selOp.businessId);
			selectOptions.value.push(selOp.businessId);
		});
	}
	
	//批量删除的函数
	const handleBatchDel = ()=>{
		console.log(selectOptions.value);
		if(selectOptions.value.length==0){
			ElMessage.info('请选中至少一条记录之后再进行删除');  
			return;
		}
		
		ElMessageBox.confirm(
			'您确定要删除选中的商家信息吗？',
			'删除提示',
			{
			  confirmButtonText: '确定',
			  cancelButtonText: '取消',
			  type: 'warning',
			}
		  )
			.then(() => {
  
			  console.log(selectOptions.value);
			  console.log(typeof(selectOptions.value));
			  console.log(JSON.stringify(selectOptions.value));
  
			  let str = JSON.stringify(selectOptions.value);
			  str = str.substring(1,str.length-1);
					  
					  //确定删除
				  proxy.$axios({
					  method: 'post',
					  url: '/business/batch/'+str,
				  }).then(res=>{
					  let resultBean = res.data;
					  if(resultBean.code == 200){
						  ElMessage.success('删除成功');  
						  getByPage();
					  }else{
						  ElMessage.error(resultBean.msg);
					  }
				  })
					
					  
			})
			.catch(() => {
				 ElMessage.info('取消删除');
			})
	}
	
	//上传图片的回显链接
	let imageUrl = ref('');
	
	//上传成功之后的回调
	const handleAvatarSuccess = (response,uploadFile)=>{
		ElMessage.success('上传成功');
		console.log('上传成功，',response,uploadFile);
		//负责上传完成 图片回显
		imageUrl.value = response.data;
		//将上传成功的链接放入form表单， 添加或修改时会携带到服务端
		form.value.businessImg = response.data;
	}
	
	//上传之前预检文件
	const beforeAvatarUpload = (rawFile)=>{
		//文件类型不符合要求 或者 文件大小超过要求  都不能上传
		if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
			ElMessage.error('Avatar picture must be JPG format!')
			return false
		  } else if (rawFile.size / 1024 / 1024 > 5) {
			ElMessage.error('Avatar picture size can not exceed 5MB!')
			return false
		  }
		  //可以上传
		  return true
	}
	
	onMounted(()=>{
		getByPage();
	})
  
  
  </script>
  
  <style scoped>
	  .avatar-uploader .avatar {
		width: 100px;
		height: 100px;
		display: block;
	  }
  </style>
  
  <style>
  .avatar-uploader .el-upload {
	border: 1px dashed var(--el-border-color);
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--el-transition-duration-fast);
  }
  
  .avatar-uploader .el-upload:hover {
	border-color: var(--el-color-primary);
  }
  
  .el-icon.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 100px;
	height: 100px;
	text-align: center;
  }
  </style>